<template>
	<view class="content">
		<!-- 标题 -->
		<view class="tit">{{ detail.activityStatus|prizeStatus }}</view>
		<!-- <view class="subtitle">{{ detail.useHint }}</view> -->
		<!--  秒杀活动头部-->
		<view v-if="type==1 || type == 5" class="formBox basic-info">
			<view class="code-text" @click="show=true">核销码</view>
			<view class="f-c-fs">
				<view class="label">活动编号：</view>
				<view class="value">{{ detail.orderNo }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动名称：</view>
				<view class="value">{{ detail.activityName }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动类型：</view>
				<view class="value">{{ detail.activityType|activityType }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">购买数量：</view>
				<view class="value">{{ detail.number }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">购买时间：</view>
				<view class="value">{{ detail.payTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">合计金额：</view>
				<view class="value">{{ detail.amount }}</view>
			</view>
		</view>
		<!-- 同行活动头部 -->
		<view v-if="type==3" class="formBox basic-info">
			<!--      <view class="code-text" @click="show=true">核销码</view>-->
			<view class="f-c-fs">
				<view class="label">活动编号：</view>
				<view class="value">{{ detail.orderNo }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动名称：</view>
				<view class="value">{{ detail.activityName }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动类型：</view>
				<view class="value">{{ detail.activityType|activityType }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动时间：</view>
				<view class="value">{{ detail.activityStartTime+'至'+detail.activityEndTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">组团发起时间：</view>
				<view class="value">{{ detail.groupStartTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">组团完成时间：</view>
				<view class="value">{{ detail.groupEndTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">组团人数：</view>
				<view class="value">{{ detail.groupPeople }}人</view>
			</view>

		</view>
		<!-- 集客活动 -->
		<view v-if="type==2" class="formBox basic-info">
			<view class="code-text" @click="show=true">签到码</view>
			<view class="f-c-fs">
				<view class="label">活动编号：</view>
				<view class="value">{{ detail.activityOrderNo }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动名称：</view>
				<view class="value">{{ detail.activityName }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动类型：</view>
				<view class="value">{{ detail.activityType|activityType }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动时间：</view>
				<view class="value">{{ detail.activityTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">报名时间：</view>
				<view class="value">{{ detail.createOrderTime }}</view>
			</view>

		</view>
		<!-- 抽奖活动 -->
		<view v-if="type==4" class="formBox basic-info">
			<view class="code-text" @click="show=true">核销码</view>
			<view class="f-c-fs">
				<view class="label">活动编号：</view>
				<view class="value">{{ detail.activityOrderNo }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动名称：</view>
				<view class="value">{{ detail.activityName }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动类型：</view>
				<view class="value">{{ detail.activityType | activityType }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动时间：</view>
				<view class="value">{{ detail.activityStartTime }}-{{ detail.activityEndTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">中奖时间：</view>
				<view class="value">{{ detail.createOrderTime }}</view>
			</view>

		</view>
		<!-- 姓名电话 -->
		<view v-if="type==2" class="formBox basic-info">
			<view class="f-c-fs">
				<view class="label">姓名：</view>
				<view class="value">{{ detail.customerName }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">电话：</view>
				<view class="value">{{ detail.customerPhone }}</view>
			</view>
		</view>
		<view v-if="detail.prizeList.length" class="formBox goods-info">
			<view class="f-c-fs">
				<view class="tit">{{ detail.prizeType }}</view>
			</view>
			<view v-for="(item,index) in detail.prizeList" :key="index" class="f-c-fs">
				<view class="name">{{ item.name }}</view>
				<view class="num">X{{ item.number }}</view>
			</view>
		</view>
		<!-- 商品 -->
		<view v-if="detail.noUseCouponOrshopp.length" class="formBox goods-info">
			<view class="f-c-fs">
				<view class="tit">未核销商品</view>
			</view>
			<view v-for="(item,index) in detail.noUseCouponOrshopp" :key="index" class="f-c-fs">
				<view class="name">{{ item.name }}</view>
				<view class="num">X{{ item.remainingNumber }}</view>
			</view>
		</view>
		<!-- 核销订单 -->
		<view v-for="(item,index) in detail.verificationVoList" v-if="detail.verificationVoList.length" :key="index"
			class="formBox order-info">
			<view class="f-c-fs">
				<view class="name name-tit">已核销</view>
			</view>
			<view class="f-c-fs">
				<view class="name">{{ item.name }}</view>
				<view class="name">X{{ item.num }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">核销时间：</view>
				<view class="value">{{ item.writeTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">核销门店：</view>
				<view class="value">平台邮件/到店核销/门店自提</view>
			</view>
		</view>
		<!-- 发货门店 -->
		<view v-if="detail.activityUnit.length" class="formBox store">
			<view class="tit">活动门店</view>
			<view v-for="(item,index) in detail.activityUnit" :key="index" class="list">
				<view class="name">{{ item.storeName }}</view>
				<view class="address">{{ item.address }}</view>
				<view class="f-c-sb">
					<view class="f-c-fs">
						<view class="item item-l">
							<view class="item-t">{{ item.distance }}km</view>
							<view class="item-b">距离</view>
						</view>
						<!-- <view class="item item-l">
							<view class="item-t">{{ item.counselorNum }}人</view>
							<view class="item-b">服务顾问</view>
						</view> -->
					</view>
					<view class="f-c-fe">
						<view class="item item-r" @click="tell(item.contactPhone)">
							<image class="logo" mode="widthFix"
								:src="imagePath+'glxcx/phone.png'"></image>
						</view>
						<view class="item item-r" @click="goAddress(item.lon,item.lat)">
							<image class="logo-add" mode="widthFix"
								:src="imagePath+'glxcx/address.png'"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view v-if="detail.clientStoreDto.length" class="formBox store">
			<view class="tit">活动门店</view>
			<view v-for="(item,index) in detail.clientStoreDto" :key="index" class="list">
				<view class="name">{{ item.storeName }}</view>
				<view class="address">{{ item.address }}</view>
				<view class="f-c-sb">
					<view class="f-c-fs">
						<view class="item item-l">
							<view class="item-t">{{ item.distance }}KM</view>
							<view class="item-b">距离</view>
						</view>
						<view class="item item-l" >
							<view class="item-t">{{ item.counselorNum }}人</view>
							<view class="item-b">服务顾问</view>
						</view>
					</view>
					<view class="f-c-fe">
						<view class="item item-r" @click="tell(item.phone)">
							<image class="logo" mode="widthFix"
								:src="imagePath+'glxcx/phone.png'"></image>
						</view>
						<view class="item item-r" @click="goAddress(item.lon,item.lat)">
							<image class="logo-add" mode="widthFix"
								:src="imagePath+'glxcx/address.png'"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 活动截止日期 -->
		<view v-if="detail.status==2&&type==2" class="formBox basic-info">
			<view class="f-c-fs">
				<view class="label">签到时间：</view>
				<view class="value">{{ detail.writeOffTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">核销门店：</view>
				<view class="value">{{ detail.storeName }}</view>
			</view>
		</view>
		<view v-if="detail.status==3&&type==2" class="formBox basic-info">
			<view class="f-c-fs">
				<view class="label">活动截止日期：</view>
				<view class="value">{{ detail.activityEndTime }}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">说明：</view>
				<view class="value">{{ detail.remark }}</view>
			</view>
		</view>
		<u-modal v-model="show" title="核销码">
			<view class="slot-content f-c-c">
				<image :src="path" mode="" style="width: 200rpx;height: 200rpx;margin: 40rpx 0;"></image>
			</view>
		</u-modal>
		<l-painter css="width:200rpx;height:200rpx;" custom-style="position: fixed; left: 200%" isCanvasToTempFilePath
			@success="path = $event">
			<l-painter-qrcode :text="detail.code" css="width: 200rpx; height: 200rpx" />
		</l-painter>
	</view>
</template>

<script>
	import {
		seckillOrderInfo,
		clientCollectActivityOrderInfo,
		peerOrderInfo,
		luckdrawOrderInfo,
		clientRightsOrderInfo
	} from '@/api/marketingB-helper.js';

	export default {
		data() {
			return {
				imagePath:this.$imagePath,
				orderNo: '',
				type: '',
				detail: {},
				path: '',
				show: false
			};
		},
		onLoad(option) {
			this.orderNo = JSON.parse(option.param).orderNo;
			this.type = JSON.parse(option.param).type;
			this.init();
		},
		methods: {
			tell(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			goAddress(longitude, latitude) {
				console.log(longitude, latitude)
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function() {
						console.log('success');
					}
				});
			},
			init() {
				if (this.type == 1) {
					this.getseckillDetail();
				}  else if (this.type == 2) {
					this.getcollectDetail();
				} else if (this.type == 3) {
					this.getpeerDetail();
				}else if (this.type == 4) {
					this.getluckdrawDetail();
				}else if(this.type == 5) {
					this.getClientRightsOrderInfo();
				}
			},
			//秒杀活动
			getseckillDetail() {
				var data = {
					bizNo: this.orderNo,
					lon: this.$get('location')[0],
					lat: this.$get('location')[1]
				};
				seckillOrderInfo(data).then(res => {
					this.detail = res.data;
				});
			},
			
			//集客活动
			getcollectDetail() {
				var data = {
					bizNo: this.orderNo,
					// lon: this.$get('location')[0],
					// lat: this.$get('location')[1]
				};
				clientCollectActivityOrderInfo(data).then(res => {
					this.detail = res.data;
				});
			},
			//同行活动
			getpeerDetail() {
				var data = {
					bizNo: this.orderNo,
					lon: this.$get('location')[0],
					lat: this.$get('location')[1]
				};
				peerOrderInfo(data).then(res => {
					this.detail = res.data;
				});
			},
			//抽奖活动
			getluckdrawDetail() {
				var data = {
					bizNo: this.orderNo,
					// lon: this.$get('location')[0],
					// lat: this.$get('location')[1]
				};
				luckdrawOrderInfo(data).then(res => {
					this.detail = res.data;
				});
			},
			//权益卡
			getClientRightsOrderInfo() {
				var data = {
					bizNo: this.orderNo,
				};
				clientRightsOrderInfo(data).then(res => {
					this.detail = res.data;
				});
			}
		}
	};
</script>

<style lang="less">
	.content {
		padding: 20rpx 0;
		background: #f5f5f5;

		.tit {
			width: 702rpx;
			margin: auto;
			font-size: 32rpx;
			font-weight: bold;
			color: #177fff;
		}

		.subtitle {
			width: 702rpx;
			margin: auto;
			padding: 8rpx 0 10rpx;
			font-size: 26rpx;
			color: #999999;
		}

		.goods-info {
			padding: 26rpx 26rpx 18rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #333;
			border-radius: 18px;

			.f-c-fs {
				padding-bottom: 12rpx;

				.tit {
					color: #333;
				}

				.name,
				.num {
					width: 50%;
				}

				.num {
					font-weight: 400;
				}
			}
		}

		.order-info {
			padding: 26rpx 26rpx 18rpx;
			font-size: 26rpx;
			font-weight: bold;
			border-radius: 18px;

			.f-c-fs {
				padding-bottom: 12rpx;

				.name {
					width: 50%;
					color: #333333;
					padding: 0 0 12rpx;
				}

				.name-tit {
					font-size: 28rpx;
				}
			}
		}

		.store {
			border-radius: 18px;
			padding-left: 26rpx;
			padding-right: 26rpx;
			color: #333333;

			.tit {
				padding: 40rpx 0 0;
				font-size: 28rpx;
				font-weight: bold;
			}

			.list {
				border-bottom: 1px solid #ededed;
				padding: 20rpx 0;

				.name {
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
				}

				.address {
					font-size: 24rpx;
					font-weight: bold;
					color: #999999;
					line-height: 35rpx;
				}

				.item-l {
					margin-right: 70rpx;
				}

				.item-r {
					margin-left: 70rpx;
				}

				.item {
					padding: 0;
					text-align: center;

					.item-t {
						font-size: 26rpx;
						font-weight: bold;
						color: #333333;
						line-height: 80rpx;
					}

					.item-b {
						font-size: 22rpx;
						font-weight: bold;
						color: #999999;
					}

					.logo {
						width: 28rpx;
					}

					.logo-add {
						width: 35rpx;
					}
				}
			}

			.list:last-child {
				border: none;
			}
		}

		.basic-info {
			border-radius: 18px;
			padding: 30rpx 26rpx 0;
			position: relative;

			.code-text {
				position: absolute;
				right: 26rpx;
				top: 26rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #177fff;
			}

			.value {
				font-weight: bold;
				font-size: 28rpx;
				flex: 1;
				text-align: left;
				padding-left: 20rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.label {
				font-size: 28rpx;
			}

			.f-c-fs {
				padding-bottom: 30rpx;
			}
		}
	}
</style>
